﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js">

    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body{
            background: url("pig/ppp.jpg");
        }


		#1{
			position: inherit;
			left: 200px;
		}
		
        header {
            width: 100%;
            height: 100px;
            border: 0px;
            margin: 0px;
        }
        header div{
            width: 600px;
            height: 100%;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            font-family: '宋体';
        }
        header div span{
            font-family: '微软雅黑';
            color: yellow;
            font-size: 325x;
        }

        .center {
            width: 600px;
            margin: 0 auto;
            list-style: none;
        }

        .one {
            width: 130px;
            height: 160px;
            border-radius: 30px;

            box-shadow: 2px 2px 5px white;
            perspective: 500px;
            transform-style: preserve-3d;
            float: left;
            margin-left: 50px;
            margin-top: 20px;

        }

        .zheng {
            width: 130px;
            height: 160px;
            border-radius: 20px;
            overflow: hidden;
            position: absolute;

        }
        .zheng img{
            width: 100%;
            height: 100%;
        }

        .fan {
            width: 130px;
            height: 160px;
            border-radius: 20px;
            background-color: whitesmoke;
            position: absolute;
            backface-visibility: hidden;
            transform: rotateY(180deg);
            text-align: center;
            line-height: 160px;
            color: orangered;
            font-weight: bold;

        }

      /*  .one:hover {
            transform: rotateY(180deg);
            transition: 1s;
        }*/

        .go{transform: rotateY(180deg);
                                     transition: 1s;
        }
    </style>
</head>
<body>
<header>
    <div><span>点击图片</span>，康康新运势
    
    <a href="index3.html"><input type="button" value="继续往下看请点击这里"  style="height: 30px; width: 150px;"> </a>
    </div>
</header>
<div class="">
    <ul class="center">
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                迎来人生巅峰
                <!--好嗨哦感觉人生到达巅峰-->
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                脱单
                <!--确认过眼神，遇见对的人-->
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                胖一斤
                <!--吃胖了你就别跑了-->
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                瘦十斤
                <!--哎呀呀呀厉害了-->
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">

                升职加薪
                <!--燃烧我的卡路里-->
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                突然火了
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                暴富
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                犯桃花
            </div>
        </li>
        <li class="one">
            <div class="zheng">
                <img src="pig/a1.jpg" alt="">
            </div>
            <div class="fan">
                永不加班
            </div>
        </li>
    </ul>
</div>
<div class="music"></div>
<audio class="bgm" src="pig/pig.mp3" autoplay="autoplay" loop="loop" ></audio>
<script>
    var wen=["永不加班","犯桃花","暴富",
    "突然火了","升职加薪","瘦十斤","胖一斤","脱单","迎来人生巅峰"];
    var bgm=$(".bgm");
    setInterval(function () {

        for(var i=0;i<15;i++){
            $(".fan").eq(i).text(wen[Math.floor(Math.random()*wen.length)]);
        }
    },5000)
    $(".one").mouseenter(function () {
        $(this).addClass("go");
        /*$(this).css("transform","rotateY(180deg)").css("transition","1s");*/
        //alert($(".bgm"));
        $(".bgm")[0].pause();
        //alert($(".bgm")[0].paused);
        $(".music").append("<audio src='pig/卡路里 (clip).mp3' autoplay></audio>");
    }).mouseleave(function () {
        $(this).removeClass("go");
        /*$(\nthis).css("transform","rotateY(360deg)").css("transition","1s");*/
      	$(".music").empty();
      	$(".bgm")[0].play();
    })
</script>

		

</body>

</html>